<template>
    <div id="NationalRankings" style="width: 45%;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {

    },
    mounted() {
        this.drawMap()

    },
    methods: {
        drawMap() {
            let myChart = echarts.init(document.getElementById('NationalRankings'));
            let data = [
                {
                    "name": "北京市",
                    "value": 5446
                },
                {
                    "name": "江苏省",
                    "value": 3923
                },
                {
                    "name": "山东省",
                    "value": 3430
                },
                {
                    "name": "广东省",
                    "value": 2805
                },
                {
                    "name": "河北省",
                    "value": 2424
                },
                {
                    "name": "陕西省",
                    "value": 1830
                },
                {
                    "name": "湖南省",
                    "value": 1674
                },
                {
                    "name": "四川省",
                    "value": 1266
                },
                {
                    "name": "辽宁省",
                    "value": 1232
                },
                {
                    "name": "河南省",
                    "value": 1199
                },
                {
                    "name": "浙江省",
                    "value": 1107
                },
                {
                    "name": "湖北省",
                    "value": 1103
                },
                {
                    "name": "安徽省",
                    "value": 984
                },
                {
                    "name": "海南省",
                    "value": 937
                },
                {
                    "name": "福建省",
                    "value": 908
                },
                {
                    "name": "山西省",
                    "value": 761
                },
                {
                    "name": "广西壮族自治区",
                    "value": 755
                },
                {
                    "name": "上海市",
                    "value": 650
                },
                {
                    "name": "重庆市",
                    "value": 647
                },
                {
                    "name": "云南省",
                    "value": 613
                },
                {
                    "name": "新疆维吾尔自治区",
                    "value": 588
                },
                {
                    "name": "天津市",
                    "value": 574
                },
                {
                    "name": "内蒙古自治区",
                    "value": 474
                },
                {
                    "name": "吉林省",
                    "value": 471
                },
                {
                    "name": "甘肃省",
                    "value": 465
                },
                {
                    "name": "黑龙江省",
                    "value": 422
                },
                {
                    "name": "贵州省",
                    "value": 354
                },
                {
                    "name": "江西省",
                    "value": 323
                },
                {
                    "name": "青海省",
                    "value": 166
                },
                {
                    "name": "西藏自治区",
                    "value": 116
                },
                {
                    "name": "宁夏回族自治区",
                    "value": 107
                }
            ]
            // 遍历接口返回的数组拿到每个省的value值
            let value = data.map(item =>item.value);
            // 计算最大值和最小值
            var maxValue = Math.max(...value);
            var minValue = Math.min(...value);
            // 定义柱状图的颜色
            const colorMapping = [
                { min: maxValue * 0.8, max: maxValue, color: 'red' },
                { min: maxValue * 0.7, max: maxValue * 0.8, color: '#9a60b4' },
                { min: maxValue * 0.6, max: maxValue * 0.7, color: '#fc8452' },
                { min: maxValue * 0.5, max: maxValue * 0.6, color: '#5470c6' },
                { min: maxValue * 0.4, max: maxValue * 0.5, color: '#3ba272' },
                { min: maxValue * 0.3, max: maxValue * 0.4, color: '#fac858' },
                { min: minValue, max: maxValue * 0.3, color: '#73c0de' },
            ]
            var option = {
                tooltip: {},
                title: {
                    text: '全国企业地区排行',
                    subtext: '更新时间:2024-11-30 01:00:00',
                    top: 10,
                    x: 'left',
                    textStyle: {
                        color: '#000'
                    }
                },
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'category',
                    data: data.map(item => item.name).reverse()
                },
                series: [
                    {
                        type: 'bar',
                        data:value.reverse(),
                        itemStyle: {
                            color: function (params) {
                                 // 根据 value 值确定颜色
                                 for (let i = 0; i < colorMapping.length; i++) {
                                    if (value[params.dataIndex] >= colorMapping[i].min && value[params.dataIndex] <= colorMapping[i].max) {
                                        return colorMapping[i].color;
                                    }
                                }
                            }
                        }
                    },
                ]
            };

            myChart.setOption(option);


        }
    }
}
</script>